<template>
	<div class="middle">
		<div class="middlebg"></div>
		<div class="top">
			<span class="studentManagement">学生管理 <i class="el-icon-arrow-right"></i></span>
			<span class="addStudent" @click="addStudent" v-if="rule==1?false:true">+添加学生</span>
			<span class="back" @click="back">返回</span>
		</div>
		<el-card class="box-card" v-loading="loading" element-loading-background="rgba(255,255,255, 0.5)">
		  <div slot="header" class="clearfix card">
		  	<!--搜索区域-->
		  	<div>
		  		姓名<el-input class="ipt" clearable v-model="stu_name" placeholder="请输入姓名" ></el-input>
		  		学号<el-input class="ipt" clearable v-model="stu_no" placeholder="请输入学号"></el-input>
				<el-button type="danger" class="btn" @click="search">搜索</el-button>
				<form class="form">
				  <input type="file" name="fileup" id="uploadEventFile" v-on:change="fileChange($event)" style="display:none" />
				</form>
				<el-button type="success" @click="studentTemplate" class="btn" v-if="rule==1?false:true">导入</el-button>
				<a href="/api/template/studentTemplate" class="upload">下载导入模板</a>
		  	</div>
	    	<!--表格区域-->
	    	<el-table ref="singleTable" :data="studentList" highlight-current-row style="width: 100%">
			    <el-table-column property="stu_name" label="姓名" width="100" align="center"></el-table-column>
			    <el-table-column property="stu_sex" label="性别" width="80" align="center"></el-table-column>
			    <el-table-column property="stu_birthday" label="出生日期" width="120" align="center"></el-table-column>
			    <el-table-column property="stu_no" label="学籍号" width="180" align="center"></el-table-column>
			    <el-table-column property="gradeClass" label="班级" width="180" align="center"> </el-table-column>
			    <el-table-column property="seat_number" label="座位号" width="100" align="center"> </el-table-column>
				<el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row.id)" type="primary" plain size="mini">编辑</el-button>
            <el-button @click="del(scope.row.id)" type="success" plain size="mini">删除</el-button>
          </template>
			    </el-table-column>
			  </el-table>
			<!--分页功能-->
			<el-pagination
			   class="fenye"
			   @size-change="SizeChange"
			   @current-change="currentChange"
			   :current-page="page"
         :page-sizes="pagesizes"
         :page-size="rows"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total"
         v-if ="studentList.length == 0? false :true">
		  	</el-pagination>
		  	<!--学生编辑-->
		  	<el-dialog title="学生编辑" :visible.sync="showAdd" class="add">
			  <el-form :model="findStudentsInfo" ref="findStudentsInfo" :rules="rules" :inline="true" label-position="right" class="add">
			    <el-form-item label="姓名" class="name" prop="student_name">
			      <el-input class="input" v-model="findStudentsInfo.stu_name" autocomplete="off"></el-input>
			    </el-form-item>
			    <template>
			    	班级
				  	<el-select class="class" v-model="class_id" placeholder="请选择">
				    	<el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
				    	</el-option>
				  	</el-select>
				  </template>
			    <template>
			    	<div class="sex">
			    		性别
				  		<el-radio class="boy" v-model="sex" :label="1">男</el-radio>
				  		<el-radio v-model="sex" :label="0">女</el-radio>
			    	</div>
          </template>
          <template >
            出生日期
            <el-date-picker type="date" v-model="findStudentsInfo.stu_birthday" placeholder="选择日期">
            </el-date-picker>
          </template>
          <el-form-item label="学籍号" class="stu_no" prop="stu_no">
            <el-input class="input telinput" v-model="findStudentsInfo.stu_no" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="学籍号" class="stu_no" style="display: none;">
            <el-input class="input telinput" v-model="findStudentsInfo.old_stu_no" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="座位号" class="seat_number" style="display: none;">
            <el-input class="emailinput" v-model="findStudentsInfo.old_seat_number" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="座位号" class="seat_number">
            <el-input class="emailinput" v-model="findStudentsInfo.seat_number" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="病例备注" class="medical_history" prop ="teacher_phone">
            <el-input type="text" v-model="findStudentsInfo.medical_history" class="input telinput" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="身高" class="height">
            <el-input class="emailinput" v-model="findStudentsInfo.height" autocomplete="off"></el-input>
          </el-form-item>
          <template>
            <div class="textarea">
              备注
              <el-input type="textarea" class="input" v-model="findStudentsInfo.content" :rows="4" placeholder="请输入内容">
            </el-input>
            </div>
          </template>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="cancleAdd">取 消</el-button>
			    <el-button type="primary" @click="postEdit">确 定</el-button>
			  </div>
			</el-dialog>
		 	<!--添加学生-->
		 	<el-dialog title="添加学生" :visible.sync="showStudent" class="add">
			  <el-form :model="addStudentInfo" ref="addStudentInfo" :rules="rules" :inline="true" label-position="right" class="add">
			    <el-form-item label="姓名" class="name" prop="stu_name">
			      <el-input class="input" v-model="addStudentInfo.stu_name" autocomplete="off"></el-input>
			    </el-form-item>
			    <template>
			    	班级
				  	<el-select class="class" v-model="selectClassId" prop="class_id" placeholder="请选择">
				    	<el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
				    	</el-option>
				  	</el-select>
				</template>
			    <template>
			    	<div class="sex">
			    		性别
				  		<el-radio class="boy" v-model="sex" :label="1">男</el-radio>
				  		<el-radio v-model="sex" :label="0">女</el-radio>
			    	</div>
				</template>
				<template >
					出生日期
					<el-date-picker prop="stu_birthday" type="date" v-model="addStudentInfo.stu_birthday" placeholder="选择日期">
					</el-date-picker>
			   </template>
			    <el-form-item label="学籍号" class="stu_no" prop="stu_no">
			      <el-input class="input telinput" v-model="addStudentInfo.stu_no" autocomplete="off"></el-input>
			    </el-form-item>
			    <el-form-item label="座位号" class="seat_number">
			      <el-input class="emailinput" v-model="addStudentInfo.seat_number" autocomplete="off"></el-input>
			    </el-form-item>
			    <el-form-item label="病例备注" class="medical_history" prop ="teacher_phone">
			      <el-input type="text" v-model="addStudentInfo.medical_history" class="input telinput" autocomplete="off"></el-input>
			    </el-form-item>
				<el-form-item label="身高" class="height">
				  <el-input class="emailinput" v-model="addStudentInfo.height" autocomplete="off"></el-input>
				</el-form-item>
			    <template>
			    	<div class="textarea">
			    		备注
				    	<el-input type="textarea" class="input" v-model="addStudentInfo.content" :rows="4" placeholder="请输入内容">
						</el-input>
			    	</div>
			    </template>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="cancleAdd">取 消</el-button>
			    <el-button type="primary" @click="postStudent">确 定</el-button>
			  </div>
			</el-dialog>
		  	<!--导入学生-->
		  	<el-dialog title="导入学生" :visible.sync="studentAdd">
			  <el-form :model="form">
			    <template>
			    	班级
				  	<el-select class="class" v-model="selectClassId" @change ="gradeClass" placeholder="请选择">
				    	<el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
				    	</el-option>
				  	</el-select>
				</template>
			    <el-upload
				  class="upload"
				  ref="upload"
				  :action="url"
				  :headers="header"
				  :data='data'
				  name ='excel'
				  :on-preview="handlePreview"
				  :on-remove="handleRemove"
				  :file-list="excel"
				  :auto-upload="false">
				  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
				  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
				</el-upload>
				<div class="notes">注：为确保数据的统一和有效，请下载查看<a href="/api/template/studentTemplate">导入模板</a></div>
			  </el-form>
			</el-dialog>
		  </div>
		</el-card>
	</div>
</template>

<script>
	export default {
		data(){
			var checkName = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('名字不能为空'));
        }
      }
			var check_stu_no = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('学籍号不能为空'));
        } else {
          const reg = /^\d{16}$/
          if (reg.test(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确的学籍号'));
          }
        }
			};
			return{
				rules: {
          stu_name: [
             { validator: checkName, trigger: 'blur' }
          ],
          stu_no: [
            {validator: check_stu_no, trigger: 'blur'}
          ],
          selectClassId: [
            { required: true, message: '请选择班级', trigger: 'change' }
          ],
					stu_birthday: [
						{ type: 'date', required: true, message: '请选择出生日期', trigger: 'change' }
					],
        },
        url:'http://pcprograme.tijian121.com/api/student/importStudentsInfo',
        loading:true,
        studentList:[],
        rows:6,//每页几条
        page:1,//当前显示页数
        pagesizes:[6,12,18,24],//更改每页显示条数
        total:20,//一共多少条,
        showAdd:false,
        selectId:'',//当前选中班级id
        selectClassId:'',
        stu_name:'',//姓名
        stu_no:'',//学号
        options:[],//班级信息
        findStudentsInfo:{
          id:'',
          stu_name:'',
          sex:'',
          seat_number:'',
          old_seat_number:'',
          stu_birthday:'',
          medical_history:'',
          content:'',
          stu_no:'',
          old_stu_no:'',
          class_id:'',//班级id
					height:'',
        },//存放编辑页面信息
        class_id:'',
        addStudentInfo:{
          stu_name:'',
          sex:'',
          seat_number:'',
          stu_birthday:'',
          medical_history:'',
          content:'',
          stu_no:'',
          class_id:'',//班级id
					height:'',//身高
        },//存放添加学生页面信息
        sex:'',
        showStudent:false,
        studentAdd:false,//导入面板
        form:{},
        formLabelWidth: '120px',
        fileList:[],
        excel:[],
        data:{},
        header: {
          'token': window.sessionStorage.getItem('token')
        },
        rule:'',

			}
		},
		methods:{
			submitUpload() {
        this.$refs.upload.submit()
				this.getStudentsInfo()
				this.studentAdd = false
		    },
		    handleRemove(file, excel) {
		    },
		    handlePreview(file) {
		    },
			//返回上一页
			back(){
				this.$router.push({name:'classes'})
			},
			//获取学生信息
			getStudentsInfo(){
				var id = this.$route.params.id
		   		this.$http.post('/api/student/getStudentsInfo',{
		   			page:this.page,
		   			rows:this.rows,
		   			stu_name:this.stu_name,
		   			stu_no:this.stu_no,
		   			class_id:id
		   		}).then(res=>{
		   			this.loading = false
		   			this.studentList = res.data.data
		   			this.total = res.data.count
		   			res.data.data.map(item=>{
		   				if(item.get_class){
		   					item.gradeClass = item.get_class.get_grade.grade_title+item.get_class.class_name
		   				}
		   			})
		   		})
		   	},
			//每页显示条数
			SizeChange(val){
				this.rows = val
				this.getStudentsInfo()
			},
			//切换第几页
			currentChange(val){
        this.page = val
        this.getStudentsInfo()
      },
      getSchoolClassInfo(){
        this.$http.post('/api/student/classInfo')
        .then(res=>{
          res.data.map(item=>{
            item.gradeClass = item.get_grade.grade_title+item.class_name
            var obj ={}
            obj.label = item.gradeClass
            obj.value = item.id
            this.options.push(obj)

          })
        })
      },
      gradeClass(){
        this.data={
        class_id:this.selectClassId,
      }
      },
      search(){
        this.getStudentsInfo()
      },
      //导入学生信息
      studentTemplate(){
        this.studentAdd = true
      },
      //删除
      del(id){
        this.$confirm('是否永久删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$http.post('/api/student/delStudentsInfo', {
              id:id
            }).then(res=>{
              this.getStudentsInfo()
              if(res.data.code == 200){
                this.$message({
                    type: 'success',
                    message: res.data.msg
                });
              }else if(res.data.errorCode == 400){
                this.$message({
                    type: 'error',
                    message: res.data.msg
                });
              }
            })

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
		   	},
		   	//编辑
		   	edit(id){
		   		this.showAdd = true
		   		this.findStudentsInfo.id = id
		   		this.$http.post('/api/student/findStudentsInfo',{
		   			id:id
		   		}).then(res=>{
		   			this.findStudentsInfo = res.data
		   			this.class_id = res.data.class_id
		   			this.findStudentsInfo.old_seat_number = res.data.seat_number
		   			this.findStudentsInfo.old_stu_no = res.data.stu_no
		   			if(res.data.stu_sex == '男') {
		   				this.sex = 1
		   				this.findStudentsInfo.sex = 1
		   			}else if(res.data.stu_sex == '女'){
		   				this.sex = 0
		   				this.findStudentsInfo.sex = 0
		   			}
		   		})
		   	},

		   	//编辑提交
		   	postEdit(){
		   		this.$http.post('/api/student/updateStudentsInfo',{
		   			id:this.findStudentsInfo.id,
		   			stu_name:this.findStudentsInfo.stu_name,
		   			stu_no:this.findStudentsInfo.stu_no,
		   			sex:this.sex,
		   			old_seat_number:this.findStudentsInfo.old_seat_number,
		   			seat_number:this.findStudentsInfo.seat_number,
		   			stu_birthday:this.findStudentsInfo.stu_birthday,
		   			medical_history:this.findStudentsInfo.medical_history,
		   			content:this.findStudentsInfo.content,
		   			old_stu_no:this.findStudentsInfo.old_stu_no,
		   			old_seat_number:this.findStudentsInfo.old_seat_number,
		   			class_id:this.class_id,
					height:this.findStudentsInfo.height,
		   		}).then(res=>{
            if(res.data.code === 200) {
              this.$message({
                message:res.data.msg,
                type:'success'
              })
              this.showAdd=false
              this.getStudentsInfo()
            }else if(res.data.errorCode == 400) {
              this.$message({
                message:res.data.msg,
                type:'error'
              })
              this.showAdd=true
           }
          })
		   		this.showAdd = false
		   	},
		   	//取消编辑
		   	cancleAdd(){
		   		this.showAdd = false
		   	},
		   	//添加学生
		   	addStudent(){
		   		this.showStudent = true
		   	},
			//添加学生提交
		   	postStudent(){
		   		if(!this.addStudentInfo.stu_name){
		   			this.$message({
		   				message:'学生姓名不能为空',
		   				type:'error'
		   			})
		   			return
		   		}
		   		if(this.addStudentInfo.stu_no.length != 16 ){
		   			this.$message({
		   				message:'学籍号格式不正确',
		   				type:'error'
		   			})
		   			return
		   		}
          if(!this.selectClassId ){
            this.$message({
              message:'班级不能为空',
              type:'error'
            })
            return
          }
		   		if(!this.addStudentInfo.seat_number){
		   			this.$message({
		   				message:'座位号不能为空',
		   				type:'error'
		   			})
		   			return
		   		}
          if(!this.addStudentInfo.stu_birthday){
            this.$message({
              message:'出生日期不能为空',
              type:'error'
            })
            return
          }
		   		this.$http.post('/api/student/addStudentsInfo',{
		   			stu_name:this.addStudentInfo.stu_name,
		   			stu_no:this.addStudentInfo.stu_no,
		   			stu_sex:this.sex,
		   			seat_number:this.addStudentInfo.seat_number,
		   			stu_birthday:this.addStudentInfo.stu_birthday,
		   			medical_history:this.addStudentInfo.medical_history,
		   			content:this.addStudentInfo.content,
		   			class_id:this.selectClassId,
					  height:this.addStudentInfo.height,
		   		}).then(res=>{
		   			if(res.data.code==200){
		    		 	this.$message({
                message:res.data.msg,
                type:'success'
              })
		    		 	this.showStudent = false
		    		 	this.getStudentsInfo()
              //清空信息
              this.addStudentInfo.stu_name =''
              this.addStudentInfo.stu_no = ''
              this.sex = ''
              this.addStudentInfo.seat_number=''
              this.addStudentInfo.stu_birthday=''
              this.addStudentInfo.medical_history=''
              this.addStudentInfo.content=''
              this.selectClassId=''
              this.addStudentInfo.height=''
            }else {
		    		 	this.$message({
                message:res.data.msg,
                type:'error'
						  })
            }
		   		})
		   	},
		},
		created(){
			//获取到身份
      this.rule = localStorage.getItem('rule')
			this.getStudentsInfo()
			this.getSchoolClassInfo()
		}

	}
</script>

<style>
	.el-main {
		padding: 0;
	}
	.middle {
	    height: 100%;
	    width: 100%;
	    background-repeat:repeat;
	    background-size: contain;
	    background-position: center;
	    background-attachment: fixed;
	    z-index: -1;
	}
	.el-dialog {
	    width: 800px !important;
	}
</style>

<style lang="less" scoped>
	.middlebg {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		background: url(../../assets/image/bg-img.png) no-repeat center;
		background-size: 100%;
	}
	.top {
		height: 50px;
		line-height: 50px;
		background-color: #dbdbdb;
		position: relative;
		.studentManagement {
			display: inline-block;
			background: #00b02d;
			padding:0 15px;
			color: #fff;
		}
		.addStudent {
			display: inline-block;
			background: #3A8EE6;
			height: 24px;
			line-height: 24px;
			position: absolute;
			right: 100px;
			top: 10px;
			padding: 3px 15px;
			font-size: 14px;
			border-radius: 5px;
			color: #fff;
			cursor: pointer;
		}
		.back {
			position: absolute;
			right: 0;
			background: #9cbf83;
			padding: 0 15px;
			border-radius: 3px;
			color: #fff;
			cursor: pointer;
		}
	}
	.box-card {
		margin: 30px 50px;
		.card {
			padding: 20px;
		}
		.ipt {
			width: 15%;
			margin: 0 5px;
		}
		.class {
			margin: 0 5px;
		}
		.btn {
			width: 70px;
			height: 40px;
			margin: 0 0px 0 20px;
		}
		.upload {
			color:#2483D5;
			text-decoration: underline;
		}
		.down {
			color: #3A8EE6;
			text-decoration: underline;
			margin-left: 20px;
		}
		.form {
			display: inline-block;
			border:0
		}
		.fenye {
			margin-top: 20px;
			text-align: center;
		}
		.add {
			/deep/.el-date-editor.el-input, .el-date-editor.el-input__inner {
				width: 200px;
				margin-left: 5px;
			}
			.name {
				padding-left: 30px;
				margin-right:100px;
			}
			.class,.birthday {
				width: 200px;
			}
			.birthday{
				display: inline-block
			}
			.sex {
				padding-left: 30px;
				display: inline-block;
				width: 315px;
				.boy {
					margin-left: 10px;
				}
			}
			.stu_no {
				margin-top: 15px;
				padding-left: 17px;
				position: relative;
				.input {
					width: 200px;
				}
			}
			.seat_number {
				margin-top: 15px;
				.input {
					width: 200px;
				}
			}
			.height {
				margin-left: 20px;
				}
			.medical_history {
				.input {
					width: 200px;
				}
			}
			.textarea {
				padding-left: 25px;
				padding-right: 20px;
				.input {
					margin-top: 5px;
				}
			}
			.telinput {
				margin-right: 76px;
			}

		}
		.upload {
			margin-top: 20px;
			margin-left: 40px;
		}
		.notes {
			margin-top: 10px;
			a {
				color: #2483D5;
				text-decoration: underline;
			}
		}
	}
</style>
